<template lang="pug">
  div.ratio-view
    div.bar(v-for="(item, index) in ratioData" :key="index"
      :style="{width: barWidth(item), backgroundColor: item.color || colorList[index]}")
</template>

<script>
export default {
  name: "RatioView",
  props: {
    ratioData: {
      type: Array,
      default() {
        return [];
      }
    },
    colorList: {
      type: Array,
      default() {
        return ['#F07B5F', '#05FDBB'];
      }
    }
  },
  computed: {
    total() {
      return this.ratioData.reduce((sum, item) => sum + item.value, 0);
    },
    barWidth() {
      return item => {
        return Math.round(item.value / this.total * 100) + '%';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ratio-view{
  width: 100%;
  height: rem(10);
  display: flex;
  align-items: center;
  .bar{
    width: 50%;
    height: rem(10);
    @include transition();
  }
}
</style>
